<template>
  <view class="email_edit">
    <view class="email_edit_top">
      <span v-if="readonly">当前绑定邮箱：</span>
      <span v-else>请输入新的邮箱：</span>

      <up-input
        class="up_input"
        border="bottom"
        v-model="userInfo.email"
        :readonly="readonly"
        clearable
        :placeholder="textinfo"
        :focus="isFocus"
        @focus="focus"
      ></up-input>
    </view>
    <view class="email_edit_bottom">
      <up-button
        type="primary"
        class="up_btn"
        shape="circle"
        text="更换邮箱"
        v-if="readonly"
        @click="changeEmail"
      ></up-button>
      <up-button type="primary" class="up_btn" shape="circle" text="确认修改" v-else @click="emailOk"></up-button>
    </view>
  </view>
</template>
<script setup>
import { userApi } from "../../api";

onLoad((options) => {
  userInfo.value.email = options.email;
});

const readonly = ref(true);
const textinfo = ref("更换邮箱");
const changeEmail = () => {
  readonly.value = false;
  textinfo.value = "输入您想要绑定的邮箱";
  isFocus.value = true;
  // focus();
};

const isFocus = ref(false);
const focus = () => {
  isFocus.value = true;
};
const userInfo = ref({
  nickname: "",
  address: "",
  email: "",
  avatar: ""
});
const mailReg = ref(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/);
const emailOk = () => {
  if (userInfo.value.email == "") {
    uni.showToast({
      title: "邮箱不能为空",
      icon: "none"
    });
    return;
  }
  if (mailReg.value.test(userInfo.value.email)==false) {
    uni.showToast({
      title: "请输入正确的邮箱格式",
      icon: "none"
    });
    return;
  }
  userApi.userinfoedit(userInfo.value).then((res) => {
    uni.showToast({
      title: res.msg,
      icon: "none"
    });
    // getUserInfo();
    uni.navigateBack();
  });
};
</script>
<style lang="scss" scoped>
.email_edit {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 60rpx 32rpx;
  .email_edit_top {
    .up_input {
      height: 96rpx;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      opacity: 1;
    }
    span {
      height: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.87);
      line-height: 44rpx;
    }
  }
  .email_edit_bottom {
    position: fixed;
    bottom: 60rpx;
    left: 32rpx;
    width: 686rpx;
    .up_btn {
      height: 88rpx;
      background: #306eff;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
</style>